<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>缤格</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/common.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/binge.css"/>
    <script type="text/javascript" src="../../script/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../../script/swiper.min.js"></script>
    <script type="text/javascript" src="../../script/mobile.js"></script>
    <script type="text/javascript">
        window['adaptive'].desinWidth = 750;
        window['adaptive'].baseFont = 28;
        window['adaptive'].maxWidth = 750;
        window['adaptive'].init();
    </script>
</head>

<body>
<!-- header -->
<div id="header" style="height: 0.9rem; background: #fff; position: fixed; top: 0;left: 0; width: 100%; z-index: 99">
    <div class="header">
        <div class="head-back">
            <a href="javascript:void(0);" tapmode onclick="comeBack()" class="back-btn"></a>
        </div>
        <div class="head-title">
            <h6 id="headTitle">话题详情</h6>
        </div>
        <!--<div class="head-action">-->
        <!--<a href="javascript:void(0);" tapmode class="action-btn"></a>-->
        <!--</div>-->
    </div>
</div>
<!-- header end -->

<div class="mescroll" id="mescroll" style="padding-top: 1.6rem">
    <div class="topic-section">
        <div class="topic-detail">
            <h6 class="topic-title"> </h6>
            <div class="detail">
                <p id="detail"> </p>
                <ul id="imglist">
                    <!--<li><img src="../../image/img-topic.png" alt=""></li>-->
                </ul>
            </div>
            <div class="topic-publisher">
                <p id="releaseUser"></p>
                <p id="players">0人参与</p>
            </div>
        </div>
        <div class="topic-vote mb20">
            <div class="vote-kinds">
                <a href="javascript:void(0)" topmode onclick="choose(1)" class="support"><span class="icon supportText">赞成</span></a>
                <a href="javascript:void(0)" topmode onclick="choose(0)" class="oppose"><span class="icon opposeText">反对</span></a>
            </div>
            <div class="choose-result " style="display: none;">
                <!--<div class="result1 result">
                    <div class="result-txt"><span class="icon supportText" id="supportText">赞成</span></div>
                    <div class="bar-line">
                        <div class="line" style="width: 70%; background: #7dcec8;"></div>
                    </div>
                    <div class="percentage" style="color: #7dcec8;">70%</div>
                </div>
                <div class="result2 result">
                    <div class="result-txt"><span class="icon opposeText" id="opposeText">反对</span></div>
                    <div class="bar-line">
                        <div class="line" style="width: 30%; background: #fe7678;"></div>
                    </div>
                    <div class="percentage" style="color: #fe7678">30%</div>
                </div>-->
            </div>

            <div class="result-over" style="display: none;">
                <!--<div class="result">
                    <div class="result-txt result-just"><span class="icon supportText" id="">赞成</span></div>
                    <div class="line-over">
                        <div class="result-percentage">
                            <div class="" style="color: #7dcec8;">70%</div>
                            <div class="" style="color: #fe7678;">30%</div>
                        </div>
                        <div class="bar-line">
                            <div class="line line-just" style="width: 70%; background: #7dcec8;"></div>
                            <div class="line line-back" style="width: 30%; background: #fe7678;"></div>
                        </div>
                    </div>
                    <div class="result-txt result-back"><span class="icon opposeText" id="">反对</span></div>
                </div>-->
            </div>

        </div>
        <!--<div class="vote-kinds-word">
            <p class="support">支持观点</p>
            <p class="oppose">反对观点</p>
        </div>-->
        <div class="topic-vote-list">
            <ul id="support" class="support">
                <!--<li>
                    <div class="common-user-detail">
                        <div class="user-info" tapmode onclick="commonUrl()">
                            <div class="user-icon bg-cover" style="background-image: url('../../image/img-tx.png');"></div>
                            <div class="info">
                                <div class="name">
                                    <h6>后来熟悉后来</h6>
                                    <dl class="badge-list">
                                        <dd class="icon"><img src="../../icon/icon-hz01.png" alt=""></dd>
                                        <dd class="icon"><img src="../../icon/icon-hz01.png" alt=""></dd>
                                    </dl>
                                </div>
                                <span class="time">1小时前</span>
                            </div>
                        </div>
                    </div>
                    <div class="list-info">
                        <p>好好学习比较好，那么小就 辍学，你在被拐跑了，虽然 有成功的案例但那毕竟是少 数，俗话说的好：“不怕一 万，就怕万一”。</p>
                    </div>
                    <div class="fabulous">
                        <a href="javascript:void(0);" class="fabulous-btn btn1">22456</a>
                        <a href="javascript:void(0);" class="fabulous-btn btn2 on">22456</a>
                    </div>
                </li>-->
            </ul>
            <ul id="oppose" class="oppose">

                <!--<li>
                    <div class="common-user-detail">
                        <div class="user-info" tapmode onclick="commonUrl()">
                            <div class="user-icon bg-cover" style="background-image: url('../../image/img-tx.png');"></div>
                            <div class="info">
                                <div class="name">
                                    <h6>后来熟悉</h6>
                                    <dl class="badge-list">
                                        <dd class="icon"><img src="../../icon/icon-hz01.png" alt=""></dd>
                                    </dl>
                                </div>
                                <span class="time">1小时前</span>
                            </div>
                        </div>
                    </div>
                    <div class="list-info">
                        <p>好好学习比较好，那么小就 辍学，你在被拐跑了，虽然 有成功的案例但那毕竟是少 数，俗话说的好：“不怕一 万，就怕万一”。</p>
                    </div>
                    <div class="fabulous">
                        <a href="javascript:void(0);" class="fabulous-btn btn1 on">22456</a>
                        <a href="javascript:void(0);" class="fabulous-btn btn2">22456</a>
                    </div>
                </li>
    -->
            </ul>
        </div>

        <div class="common-fixed-bottom">
            <a href="javascript:void(0);" topmode onclick="viewpoint('release_viewpoint',this)" class="fixed-bottom" style="background: #ef9b7f;">我要发言</a>
        </div>
    </div>


</div>


</body>

</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<link rel="stylesheet" type="text/css" href="../../css/mescroll.min.css"/>
<script type="text/javascript" src="../../script/mescroll.min.js"></script>
<script type="text/javascript">

    var discuss_id = '';//话题id
    var today = '';//是否为今日话题，1是，2否
    var count = 0;//投票数
    var so = '';//是否投票
    var over_status = 0;
    apiready = function () {

        setFixStatusBar(); //设置状态栏
        keybackListener()
        discuss_id = api.pageParam.discuss_id;
        today = api.pageParam.today;
        if (today != 1) {
            $("#headTitle").html('话题详情');
        }

        api.addEventListener({
            name: 'viewpoint'
        }, function (ret, err) {
            getDiscussDetail()
        });

        //获取话题详情
        getDiscussDetail()


        /*//下拉刷新
        dropDownRefresh(function () {
            getDiscussDetail()
        });*/

    }

    //创建MeScroll对象
    var mescroll = new MeScroll("mescroll", {
        down: {
            auto: false, //是否在初始化完毕之后自动执行下拉回调callback; 默认true
            callback: downCallback //下拉刷新的回调
        }
    });
    /*下拉刷新的回调 */
    function downCallback() {
        getDiscussDetail()
        //mescroll.endErr();
    }

    //跳转发布观点页面
    function viewpoint(path,that) {

        if(over_status == 2){
            pop.notice('投票时间已截止')
            return;
        }
        if($(that).hasClass('done')){
            return;
        }else {
            if(so == ''){
                pop.notice('请先表明观点');
                return;
            }
            api.openWin({
                name: 'release_viewpoint',
                url: path + '.html',
                reload: true,
                pageParam: {
                    discuss_id: discuss_id
                }
            });
        }

    }


    //获取话题详情
    function getDiscussDetail() {
        var param = {
            token: $api.getStorage('token'),
            discuss_id: discuss_id
        };
        pop.loading();
        getAjax(Interface.discuss_home, param, function (res) {
            console.log(jsonChange(res))
            var data = res.data;
            if (isDefine(data)) {

                $(".topic-title").html(data.title);//话题标题
                $("#detail").html(data.content);//话题内容
                if (data.member_id !=0) {
                    var userId = {'member_id':data.member_id}
                    $("#releaseUser").html('<em id="release">本话题由 <span class="c-primary" tapmode onclick=\'commonUrl("../activity/person_index",'+jsonChange(userId)+')\' id="userName">'+data.member_name+'</span></em> <em id="time">'+data.date+'</em> 发起')
                } else {
                    $("#releaseUser").html('<em>'+data.date+'</em>')
                }
                var over_time = '未知';
                if(isDefine(data.over_time)){
                    over_time = data.over_time;
                }
                $("#players").html(data.count + '人参与，截止时间：'+ over_time);//参与人数
                count = data.count;
                over_status = data.over_status;

                $(".supportText").html(data.just_title);//正方
                $(".opposeText").html(data.back_title);//反方

                var imgHtml = '';
                if (isDefine(data.icons_path)) {
                    for (var i = 0; i < data.icons_path.length; i++) {
                        imgHtml += '<li><img src="' + ajaxUrl + data.icons_path[i] + '" alt=""></li>'
                    }
                }
                $("#imglist").html(imgHtml);//发题内容配图


                if(data.over_status == 1){
                    //是否投票
                    if (isDefine(data.so)) {
                        so = data.so;
                        var html = '';
                        if (data.so == 1) {
                            html = '<div class="result1 result">' +
                                '                    <div class="result-txt"><span class="icon supportText" id="supportText">'+data.just_title+'</span></div>' +
                                '                    <div class="bar-line">' +
                                '                        <div class="line" style="width: '+data.rate+'%; background: #7dcec8;"></div>' +
                                '                    </div>' +
                                '                    <div class="percentage" style="color: #7dcec8;">'+data.rate+'%</div>' +
                                '                </div>';
                        } else {
                            html = '<div class="result2 result">' +
                                '                    <div class="result-txt"><span class="icon opposeText" id="opposeText">'+data.back_title+'</span></div>' +
                                '                    <div class="bar-line">' +
                                '                        <div class="line" style="width: '+data.rate+'%; background: #fe7678;"></div>' +
                                '                    </div>' +
                                '                    <div class="percentage" style="color: #fe7678">'+data.rate+'%</div>' +
                                '                </div>';
                        }
                        $(".vote-kinds").hide();
                        $(".result-over").hide()
                        $(".choose-result").show().html(html);
                    }


                }else {

                    var html = '<div class="result">' +
                        '                    <div class="result-txt result-just"><span class="icon supportText" id="">'+data.just_title+'</span></div>' +
                        '                    <div class="line-over">' +
                        '                        <div class="result-percentage">' +
                        '                            <div class="" style="color: #7dcec8;">'+data.just_rate+'%</div>' +
                        '                            <div class="" style="color: #fe7678;">'+data.back_rate+'%</div>' +
                        '                        </div>' +
                        '                        <div class="bar-line">' +
                        '                            <div class="line line-just" style="width: '+data.just_rate+'%; background: #7dcec8;"></div>' +
                        '                            <div class="line line-back" style="width: '+data.back_rate+'%; background: #fe7678;"></div>' +
                        '                        </div>' +
                        '                    </div>' +
                        '                    <div class="result-txt result-back"><span class="icon opposeText" id="">'+data.back_title+'</span></div>' +
                        '                </div>'
                    $(".vote-kinds").hide();
                    $(".choose-result").hide();
                    $(".result-over").show().html(html)
                }

                //是否表明观点且已发言
                if (isDefine(data.comment_status)) {
                    if (data.comment_status == 1) {
                        $(".fixed-bottom").addClass('done').html('已发言');
                    }
                }



                //赞成反对列表
                var support = '';//赞成列表
                var supData = data.list.support;
                if (isDefine(supData)) {
                    for (var i = 0; i < supData.length; i++) {

                        if(isDefine(supData[i].member)){
                            var badge = '';
                            if (isDefine(supData[i].member.badge_path)) {
                                if (supData[i].member.badge_path.length >= 2) {
                                    badge = '<dd class="icon"><img src="' + ajaxUrl + supData[i].member.badge_path[0] + '" alt=""></dd>' +
                                        '<dd class="icon"><img src="' + ajaxUrl + supData[i].member.badge_path[1] + '" alt=""></dd>';
                                } else {
                                    badge = '<dd class="icon"><img src="' + ajaxUrl + supData[i].member.badge_path[0] + '" alt=""></dd>';
                                }

                            }
                            var fabulous = '';
                            if (isDefine(supData[i].discuss_status)) {
                                if (supData[i].discuss_status == 1) {
                                    fabulous = '<div class="fabulous"><a href="javascript:void(0);" class="fabulous-btn btn1 on">' + supData[i].support + '</a><a href="javascript:void(0);" class="fabulous-btn btn2">' + supData[i].oppo + '</a></div>'
                                } else {
                                    fabulous = '<div class="fabulous"><a href="javascript:void(0);" class="fabulous-btn btn1">' + supData[i].support + '</a><a href="javascript:void(0);" class="fabulous-btn btn2 on">' + supData[i].oppo + '</a></div>'
                                }
                            }else {
                                fabulous = '<div class="fabulous"><a href="javascript:void(0);" tapmode onclick="discuss_updown(' + supData[i].id + ',1,this)" class="fabulous-btn btn1">' + supData[i].support + '</a><a href="javascript:void(0);" tapmode onclick="discuss_updown(' + supData[i].id + ',2,this)" class="fabulous-btn btn2">' + supData[i].oppo + '</a></div>'
                            }
                            var member_id = {member_id: supData[i].member_id}
                            support += '<li>' +
                                '                <div class="common-user-detail">' +
                                '                    <div class="user-info" tapmode onclick=\'commonUrl("../activity/person_index",'+jsonChange(member_id)+')\'>' +
                                '                        <div class="user-icon bg-cover" style="background-image: url(' + ajaxUrl + supData[i].member.icon_path + ');"></div>' +
                                '                        <div class="info">' +
                                '                            <div class="name">' +
                                '                                <h6>' + supData[i].member.name + '</h6>' +
                                '                                <dl class="badge-list" tapmode onclick="toBadgePage(event)">' + badge + '</dl>' +
                                '                            </div>' +
                                '                            <span class="time">' + supData[i].date + '</span>' +
                                '                        </div>' +
                                '                    </div>' +
                                '                </div>' +
                                '                <div class="list-info">' +
                                '                    <p>' + supData[i].content + '</p>' +
                                '                </div>' + fabulous +
                                '            </li>'
                        }

                    }

                    $("#support").html(support)
                } else {
                    $("#support").html('<li><p class="t-c c-999">暂时没有人表明观点<br>只有Uni陪你哦~</p></li>')
                }

                var oppose = '';//反对列表
                var opData = data.list.oppo;
                if (isDefine(opData)) {

                    for (var i = 0; i < opData.length; i++) {
                        if (isDefine(opData[i].member)){
                            var badge = '';
                            if (isDefine(opData[i].member.badge_path)) {
                                if (opData[i].member.badge_path.length >= 2) {
                                    badge = '<dd class="icon"><img src="' + ajaxUrl + opData[i].member.badge_path[0] + '" alt=""></dd>' +
                                        '<dd class="icon"><img src="' + ajaxUrl + opData[i].member.badge_path[1] + '" alt=""></dd>';
                                } else {
                                    badge = '<dd class="icon"><img src="' + ajaxUrl + opData[i].member.badge_path[0] + '" alt=""></dd>';
                                }

                            }
                            var fabulous = '';
                            if (isDefine(opData[i].discuss_status)) {
                                if (opData[i].discuss_status == 1) {
                                    fabulous = '<div class="fabulous"><a href="javascript:void(0);" class="fabulous-btn btn1 on">' + opData[i].support + '</a><a href="javascript:void(0);" class="fabulous-btn btn2">' + opData[i].oppo + '</a></div>'
                                } else {
                                    fabulous = '<div class="fabulous"><a href="javascript:void(0);" class="fabulous-btn btn1">' + opData[i].support + '</a><a href="javascript:void(0);" class="fabulous-btn btn2 on">' + opData[i].oppo + '</a></div>'
                                }
                            }else {
                                fabulous = '<div class="fabulous"><a href="javascript:void(0);" tapmode onclick="discuss_updown(' + opData[i].id + ',1,this)" class="fabulous-btn btn1">' + opData[i].support + '</a><a href="javascript:void(0);" tapmode onclick="discuss_updown(' + opData[i].id + ',2,this)" class="fabulous-btn btn2">' + opData[i].oppo + '</a></div>'
                            }
                            var member_id = {member_id: opData[i].member_id}
                            oppose += '<li>' +
                                '                <div class="common-user-detail">' +
                                '                    <div class="user-info" tapmode onclick=\'commonUrl("../activity/person_index",'+jsonChange(member_id)+')\'>' +
                                '                        <div class="user-icon bg-cover" style="background-image: url(' + ajaxUrl + opData[i].member.icon_path + ');"></div>' +
                                '                        <div class="info">' +
                                '                            <div class="name">' +
                                '                                <h6>' + opData[i].member.name + '</h6>' +
                                '                                <dl class="badge-list" tapmode onclick="toBadgePage(event)">' + badge + '</dl>' +
                                '                            </div>' +
                                '                            <span class="time">' + opData[i].date + '</span>' +
                                '                        </div>' +
                                '                    </div>' +
                                '                </div>' +
                                '                <div class="list-info">' +
                                '                    <p>' + opData[i].content + '</p>' +
                                '                </div>' + fabulous +
                                '            </li>'
                        }
                    }

                    $("#oppose").html(oppose)
                } else {
                    $("#oppose").html('<li><p class="t-c c-999">暂时没有人表明观点<br>只有Uni陪你哦~</p></li>')
                }

            }

            pop.close();
            mescroll.endSuccess()
        }, function (error) {
            pop.notice(error.msg);
            mescroll.endErr()
        })
    }


    //话题投票
    function choose(type) {
        var param = {
            token: $api.getStorage('token'),
            discuss_id: discuss_id,
            type: type,
        }
        if(over_status == 2){
            pop.notice('投票时间已截止')
            return;
        }
        pop.loading();
        getAjax(Interface.discuss_vote, param, function (res) {

            api.sendEvent({
                name: 'topiclist',
                extra: {}
            });
            // pop.notice(res.msg);
            pop.close();
            setTimeout(function () {
                getDiscussDetail()
            }, 1000)
        }, function (error) {
            // pop.notice(error.msg)
        })
    }

    //观点点踩
    function discuss_updown(dis_id, type, that) {
        var param = {
            token: $api.getStorage('token'),
            dis_det_id: dis_id,
            type: type,
        }
        pop.loading();
        getAjax(Interface.discuss_updown, param, function (res) {

            setTimeout(function () {
                getDiscussDetail()
            },1000)
            pop.close();
            // pop.notice(res.msg);
        }, function (error) {
            pop.close();
            // pop.notice(error.msg);
        })
    }


</script>
